<template>
  <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit" width="1000"
               height="520" @save="save" :loading="loading">
    <template slot="body">
      <div class="myClass">
        <div>
          <div style="display: flex; align-items:center; flex-direction: row">
            <div style="display: flex; align-items:center;">
              <img src="@/assets/img/group-header.png" style="width: 20px;"/>
              <span class="topAfter">{{'我的主页'}}</span>
              <vxe-checkbox style="margin-left: 10px;" :value="myHome" size="medium"
                            @change="change1"></vxe-checkbox>
            </div>
            <div style="display: flex; align-items:center; flex: 1">
              <div class="itemDotted"></div>
              <img src="@/assets/img/group-footer.png" class="handImg" @click="showMoreClick(0)" :class="showmore[0]?'moreClass':'lessClass'"/>
            </div>
          </div>
          <div v-show="showmore[0]" class="itemTexts">
            <vxe-checkbox-group v-model="selected1" class="group">
              <vxe-checkbox :key="index" style="width: 150px;margin: 10px 0;font-size: 16px" v-for="(item,index) in permissions1" :label="item.Id"
                            :content="item.Name"
                            size="mini"></vxe-checkbox>
            </vxe-checkbox-group>
          </div>
        </div>
        <div>
          <div style="display: flex; align-items:center; flex-direction: row">
            <div style="display: flex; align-items:center;">
              <img src="@/assets/img/group-header.png" style="width: 20px;"/>
              <span class="topAfter">{{'项目管理'}}</span>
              <vxe-checkbox style="margin-left: 10px;" :value="project" size="medium"
                            @change="change2"></vxe-checkbox>
            </div>
            <div style="display: flex; align-items:center; flex: 1">
              <div class="itemDotted"></div>
              <img src="@/assets/img/group-footer.png" class="handImg" @click="showMoreClick(1)" :class="showmore[1]?'moreClass':'lessClass'"/>
            </div>
          </div>
          <div v-show="showmore[1]" class="itemTexts">
            <vxe-checkbox-group v-model="selected2" class="group">
              <vxe-checkbox :key="index" style="width: 150px;margin: 6px 0;font-size: 16px" v-for="(item,index) in permissions2" :label="item.Id"
                            :content="item.Name"></vxe-checkbox>
            </vxe-checkbox-group>
          </div>
        </div>
        <div>
          <div style="display: flex; align-items:center; flex-direction: row">
            <div style="display: flex; align-items:center;">
              <img src="@/assets/img/group-header.png" style="width: 20px;"/>
              <span class="topAfter">{{'知识分享'}}</span>
              <vxe-checkbox style="margin-left: 10px;" :value="knowledge" size="medium"
                            @change="change3"></vxe-checkbox>
            </div>
            <div style="display: flex; align-items:center; flex: 1">
              <div class="itemDotted"></div>
              <img src="@/assets/img/group-footer.png" class="handImg" @click="showMoreClick(2)" :class="showmore[2]?'moreClass':'lessClass'"/>
            </div>
          </div>
          <div v-show="showmore[2]" class="itemTexts">
            <vxe-checkbox-group v-model="selected3" class="group">
              <vxe-checkbox :key="index" style="width: 150px;margin: 10px 0;font-size: 16px" v-for="(item,index) in permissions3" :label="item.Id"
                            :content="item.Name"></vxe-checkbox>
            </vxe-checkbox-group>
          </div>
        </div>
        <div>
          <div style="display: flex; align-items:center; flex-direction: row">
            <div style="display: flex; align-items:center;">
              <img src="@/assets/img/group-header.png" style="width: 20px;"/>
              <span class="topAfter">{{'员工相册'}}</span>
              <vxe-checkbox style="margin-left: 10px;" :value="picture" size="medium"
                            @change="change4"></vxe-checkbox>
            </div>
            <div style="display: flex; align-items:center; flex: 1">
              <div class="itemDotted"></div>
              <img src="@/assets/img/group-footer.png" class="handImg" @click="showMoreClick(3)" :class="showmore[3]?'moreClass':'lessClass'"/>
            </div>
          </div>
          <div v-show="showmore[3]" class="itemTexts">
            <vxe-checkbox-group v-model="selected4" class="group">
              <vxe-checkbox :key="index" style="width: 150px;margin: 10px 0;font-size: 16px" v-for="(item,index) in permissions4" :label="item.Id"
                            :content="item.Name"></vxe-checkbox>
            </vxe-checkbox-group>
          </div>
        </div>
        <div>
          <div style="display: flex; align-items:center; flex-direction: row">
            <div style="display: flex; align-items:center;">
              <img src="@/assets/img/group-header.png" style="width: 20px;"/>
              <span class="topAfter">{{'组织管理'}}</span>
              <vxe-checkbox style="margin-left: 10px;" :value="organization" size="medium"
                            @change="change5"></vxe-checkbox>
            </div>
            <div style="display: flex; align-items:center; flex: 1">
              <div class="itemDotted"></div>
              <img src="@/assets/img/group-footer.png" class="handImg" @click="showMoreClick(4)" :class="showmore[4]?'moreClass':'lessClass'"/>
            </div>
          </div>
          <div v-show="showmore[4]" class="itemTexts">
            <vxe-checkbox-group v-model="selected5" class="group">
              <vxe-checkbox :key="index" style="width: 150px;margin: 10px 0;font-size: 16px" v-for="(item,index) in permissions5" :label="item.Id"
                            :content="item.Name"></vxe-checkbox>
            </vxe-checkbox-group>
          </div>
        </div>
      </div>
    </template>
  </dialog-edit>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
// import {permissionApi, groupPermissionApi} from '@/api/organizationApiNow.js'
import permissionApi from '@/api/organizationApi/permissionApi.js'
import groupPermissionApi from '@/api/organizationApi/groupPermissionApi.js'

export default {
  components: {
    dialogEdit
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    groupId: {
      type: [String, Number],
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      showmore: [true, true, true, true, true],
      loading: false,
      myHome: null,
      project: null,
      knowledge: null,
      picture: null,
      organization: null,
      permissions1: [],
      allPermission1: [],
      selected1: [],
      permissions2: [],
      allPermission2: [],
      selected2: [],
      permissions3: [],
      allPermission3: [],
      selected3: [],
      permissions4: [],
      allPermission4: [],
      selected4: [],
      permissions5: [],
      allPermission5: [],
      selected5: [],
      allSelected: [],
      selected: []
    }
  },
  methods: {
    showMoreClick (value) {
      this.$set(this.showmore, value, !this.showmore[value])
    },
    change1(data) {
      if (data.checked) {
        this.selected1 = this.allPermission1
      } else {
        this.selected1 = []
      }
    },
    change2(data) {
      if (data.checked) {
        this.selected2 = this.allPermission2
      } else {
        this.selected2 = []
      }
    },
    change3(data) {
      if (data.checked) {
        this.selected3 = this.allPermission3
      } else {
        this.selected3 = []
      }
    },
    change4(data) {
      if (data.checked) {
        this.selected4 = this.allPermission4
      } else {
        this.selected4 = []
      }
    },
    change5(data) {
      if (data.checked) {
        this.selected5 = this.allPermission5
      } else {
        this.selected5 = []
      }
    },
    save() {
      this.selected = [...this.selected1, ...this.selected2, ...this.selected3, ...this.selected4, ...this.selected5]
      console.log(this.selected)
      let obj = {
        GroupId: this.groupId,
        Permissions: this.selected
      }
      groupPermissionApi.save(obj).then(res => {
        this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
      })
    },
    async search() {
      this.loading = true
      await groupPermissionApi.getList({Id: this.groupId}).then(res => {
        this.allSelected = res
      })
      permissionApi.getList().then(res => {
        // 筛选出导航
        let navs = res.filter(item => {
          return item.Parentid === '0'
        })
        navs.forEach(item => {
          if (item.Name === '我的主页') {
            this.permissions1 = res.filter(issue => {
              return issue.Parentid === item.Id
            })
            this.allPermission1 = this.permissions1.map(item => {
              return item.Id
            })
            this.selected1 = this.allPermission1.filter(issue => {
              return this.allSelected.map(obj => {
                return obj.Permissionid
              }).indexOf(issue) > -1
            })
          }
          if (item.Name === '项目管理') {
            this.permissions2 = res.filter(issue => {
              return issue.Parentid === item.Id
            })
            this.allPermission2 = this.permissions2.map(item => {
              return item.Id
            })
            this.selected2 = this.allPermission2.filter(issue => {
              return this.allSelected.map(obj => {
                return obj.Permissionid
              }).indexOf(issue) > -1
            })
          }
          if (item.Name === '知识分享') {
            this.permissions3 = res.filter(issue => {
              return issue.Parentid === item.Id
            })
            this.allPermission3 = this.permissions3.map(item => {
              return item.Id
            })
            this.selected3 = this.allPermission3.filter(issue => {
              return this.allSelected.map(obj => {
                return obj.Permissionid
              }).indexOf(issue) > -1
            })
          }
          if (item.Name === '员工相册') {
            this.permissions4 = res.filter(issue => {
              return issue.Parentid === item.Id
            })
            this.allPermission4 = this.permissions4.map(item => {
              return item.Id
            })
            this.selected4 = this.allPermission4.filter(issue => {
              return this.allSelected.map(obj => {
                return obj.Permissionid
              }).indexOf(issue) > -1
            })
          }
          if (item.Name === '组织管理') {
            this.permissions5 = res.filter(issue => {
              return issue.Parentid === item.Id
            })
            this.allPermission5 = this.permissions5.map(item => {
              return item.Id
            })
            this.selected5 = this.allPermission5.filter(issue => {
              return this.allSelected.map(obj => {
                return obj.Permissionid
              }).indexOf(issue) > -1
            })
          }
        })
        this.loading = false
      })
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.search()
        }
      }
    }
  }
}
</script>

<style scoped>
  .itemTexts {
    padding-right: 10px;
  }
  .itemDotted {
    height: 0.1px;
    flex: 1;
    border-bottom: 1px dotted #8c939d;
    border-spacing: 100px 0;
    margin: 0 5px
  }
  .handImg:hover {
    cursor: pointer;
  }
  .myClass span {
    font-size: 20px;
    color: #606266;
  }
  .myClass {
    padding-right: 10px;
  }
  
  .group > label:first-child {
    margin-left: 10px;
  }
  .topAfter {
    display: inline-block;
  }
  .topAfter:before{
    height: 20px;
    width: 20px;
    backgound-color: rgb(230, 230,230);
    /*background-image: url('../../../../assets/img/group-header.png');*/
  }
  .moreClass{
    transform: rotate(180deg);
  }
  .lessClass{
    transform: rotate(0deg);
  }
</style>
